<template>
    <div class="reg">
        <div class="reg-box">
            <div class="title">个人博客管理系统</div>
            <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
                <el-form-item label="账户" prop="pass">
                    <el-input type="text" v-model="ruleForm2.user" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pass">
                    <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
                    <el-button @click="resetForm('ruleForm2')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    export default {
        name:'reg',
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm2.checkPass !== '') {
                        this.$refs.ruleForm2.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm2.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                ruleForm2: {
                    pass: '',
                    checkPass: '',
                    user:''
                },
                rules2: {
                    pass: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkPass: [
                        { validator: validatePass2, trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                var that = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$ajax.post('http://127.0.0.1:3000/register',this.$qs.stringify({
                            username:this.ruleForm2.user,
                            password:this.ruleForm2.pass
                        })).then(res =>{
                            if(res.data.code == 0 && res.data.ms =='账户已存在'){
                                that.$Message.error('用户名已存在');
                            }else if(res.data.code == 0 && res.data.ms =='服务器出错'){
                                that.$Message.error('服务器出错');
                            }else {
                                console.log(res.data.ms)
                                this.$Message.success('注册成功');
                                that.$router.push('/')
                            }
                        })
                    } else {
                        console.log('error submit!!')
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>
<style lang="scss">
    @import "../scss/test";
    .reg {
        width: 100%;
        height: 100%;
        background: #2f4d69;
        color:#fff;
        position: relative;
        .reg-box {
            position: absolute;
            top:50%;
            left:50%;
            transform: translateX(-50%) translateY(-50%);
            .title {
                font-size: 30px;
                margin-bottom: 20px;
            }
            .el-input {
                height: 40px;
                width: 300px;
                display: block;
                margin: 0 auto 10px;
            }
            .el-form-item__label {
                color: #ffffff;
            }
        }
    }
</style>